<template>
  <div class="four-class-three" :style="{ '--activeColor': titleActiveColor }">
    <div class="left-content">
      <div
        v-for="(item, i) in data"
        :key="item.id"
        ref="leftItem"
        class="left-item"
        @click="leftClick(item)"
        :class="getLeftClass(item, i)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="right-content">
      <div
        v-for="(item, i) in rightData"
        :key="`${item.parentId}-${i}`"
        class="right-item"
      >
        <div class="right-item-content">
          <div class="right-item-title">
            <h6>{{ item.name }}</h6>
            <van-icon name="arrow" />
          </div>
          <div class="right-item-children-content">
            <template v-if="item.children && item.children.length > 0">
              <div
                v-for="(ite, j) in item.children"
                :key="`${ite.parentId}-${j}`"
                class="right-item-children-item"
                @click="rightClick(item, ite)"
                :class="{
                  item__active:
                    ids[ite.level - 1] === ite.value &&
                    ids[ite.level - 2] === ite.parentId
                }"
              >
                {{ ite.name }}
              </div>
            </template>
            <template v-else>
              <div
                class="right-item-children-item"
                @click="rightClick(item, { value: '', level: 4 })"
                :class="{
                  item__active:
                    ids[3] === '' &&
                    ids[2] === item.id
                }"
              >
                全部
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { flattenArr } from './index.js'
export default {
  name: 'StyleThree',
  inject: ['leafSubmit'],
  props: {
    value: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    color: {
      type: String,
      default: '#fff'
    },
    titleActiveColor: {
      type: String,
      default: '#fff'
    },
    titleInactiveColor: {
      type: String,
      default: '#333'
    },
    level: {
      type: Number,
      default: 1
    }
  },
  computed: {
    rightData() {
      let data = flattenArr(this.data).filter((item) => {
        if (item.level === 3) {
          if (!(item.level === 3 && item.value === '')) {
            return item
          }
        }
      })
      if (this.ids[1]) {
        data = data.filter((f) => f.parentId === this.ids[1])
      }
      return data
    },
    getLeftClass() {
      return (item, index) => {
        this.$nextTick(() => {
          const className = this.$refs['leftItem'][index].className.split(' ')
          if (
            this.ids[1] && this.ids[1] === ''
              ? item.parentId === this.ids[0]
              : item.value === this.ids[1]
          ) {
            className.push('item__active')

            const itemRefs = this.$refs['leftItem']
            const defalutClassName = 'left-item'
            const activeClassName = 'item__active'
            const lastItem = this.$refs['leftItem'][index - 1]
            const nextItem = this.$refs['leftItem'][index + 1]
            const lastClassName = 'item-last'
            const nextClassName = 'item-next'
            itemRefs.forEach((r, ri) => {
              r.className =
                ri === index
                  ? `${defalutClassName} ${activeClassName}`
                  : defalutClassName
            })

            if (lastItem) {
              lastItem.className = `${lastItem.className} ${lastClassName}`
            }
            if (nextItem) {
              nextItem.className = `${nextItem.className} ${nextClassName}`
            }
          }

          return className
        })
      }
    }
  },
  data() {
    return {
      ids: []
    }
  },
  created() {
    this.ids = this.value
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {},
    leftClick(item) {
      this.ids = [this.ids[0], item.value]
      if (item.leaf) {
        this.leafSubmit(this.ids)
      }
    },
    rightClick(item, ite) {
      this.ids = [this.ids[0], this.ids[1], item.id, ite.value]
      if (ite.level === 4 || ite.leaf) {
        this.leafSubmit(this.ids)
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.four-class-three {
  display: flex;
  max-height: 100%;
  background-color: #f6f6f6;

  .left-content {
    min-width: rem(146);
    // max-width: rem(168);
    max-height: 100%;
    overflow: auto;
    .left-item {
      height: rem(100);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 rem(24) 0 rem(19);
      font-size: rem(24);
      font-weight: 500;

      &.item__active {
        // background-color: #fff;
        // border-radius: rem(16) 0 0 rem(16);
        position: relative;
        &::before {
          content: '';
          width: rem(4);
          height: rem(24);
          background: var(--activeColor);
          border-radius: rem(2);
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: rem(-12);
        }
      }
      // &.item-last {
      //   border-radius: 0 0 rem(16) 0;
      // }
      // &.item-next {
      //   border-radius: 0 rem(16) 0 0;
      // }
    }
  }
  .right-content {
    flex: 1;
    padding-bottom: rem(30);
    overflow: auto;
    .right-item {
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: rem(47);
        margin-bottom: rem(30);
        .van-icon {
          font-weight: bold;
          color: #a4a3a6;
        }
      }
      &-content {
        padding-right: rem(24);
        h6 {
          font-size: rem(30);
          font-weight: 500;
          color: #222222;
          line-height: 1;
        }
      }
      &-children {
        &-content {
          background-color: #fff;
          padding: rem(29) rem(20) rem(9) rem(20);
          border-radius: rem(16);

          display: flex;
          flex-wrap: wrap;
        }
        &-item {
          min-width: rem(158);
          padding: rem(16) rem(25);
          font-size: rem(26);
          font-weight: 400;
          color: #333333;
          border: rem(1) solid #e5e5e5;
          border-radius: rem(30);
          text-align: center;
          margin: 0 rem(18) rem(20) 0;
          &.item__active {
            border-color: var(--activeColor);
          }
        }
      }
    }
  }
}
</style>
